<script lang="ts" setup>
import { ref, reactive, watch, onMounted,toRaw} from 'vue'
import storeMap from '@/pina/index'
import { typesOptions } from '@/lib/dict'
import { debugWorkFlow } from '@/api/index'
import { getQueryParam } from '@/lib/utils'
import { Input } from '@/components/ui/input'
import { Textarea } from '@/components/ui/textarea'
import { Notification } from 'vue-amazing-ui'
import { Toaster, useToast } from '@/components/ui/toast'

const notification = ref()
// const { toast } = useToast()
const { showDraw } = defineProps(['showDraw']);
const open = ref(showDraw)
const emit = defineEmits(['update:showDraw'])
watch(() => showDraw, (newValue, oldValue) => {
  if (newValue) {
    open.value = showDraw
    const startStore = storeMap.useStartStore()
    const startOutputData = startStore.template.data.output;
    debuggerModel = [...startOutputData.map(item => ({ ...item, value: '' }))]
  }
})
function onClose() { // 点击遮罩层或左上角叉或取消按钮的回调
  // open.value = false
  emit('update:showDraw', false)
}

let debuggerModel = reactive([])
// [...startOutputData.map(item=>({...item,value:''}))]
onMounted(() => {
  if (localStorage.debuggerModel) {
    debuggerModel = JSON.parse(localStorage.debuggerModel)
  }
})

function onOpen() { // 点击遮罩层或左上角叉或取消按钮的回调
  open.value = true
}
defineExpose({
  onOpen
})

const debuggerStore = storeMap.useDebuggerStore();
const getType = (data) => {
  const typeObj = data && typesOptions.find(item => item.value == data).label
  return typeObj
}

const debuggerWorkFlow = async () => {
  //   localStorage.debuggerModel = JSON.stringify(debuggerModel)
  //   const data =`电影分析：
  // 很抱歉，但您提供的信息不足以确定具体是哪一部电影。由于“咒术”是一个广泛的主题，可能有多部电影以此为名或者包含这样的元素。如果您能提供更详细的信息，比如电影的全名、导演、主演或者发行年份等，我将能够更准确地帮助您分析该电影的剧情。

  // 不过，如果您指的是2020年日本电影《咒术回战》（Jujutsu Kaisen），我可以为您提供一个大致的剧情分析：

  // 《咒术回战》是一部基于芥见下下的同名漫画改编的动画电影，讲述了以下剧情：`
  debuggerStore.addNodeLoading(true)
  const { data, msg } = await debugWorkFlow({
    flowCode: getQueryParam('code'),
    "inputVariables": [...toRaw(debuggerModel)]
  })
  if (data) {
    debuggerStore.setDebuggerResponse(data)
    debuggerStore.saveDebuggerResponse(data)
  } else {
    notification.value.error({
      title: '错误信息',
      description: msg,
      duration: null,
    }) // 
    // toast({
    //   title: msg
    // })
    debuggerStore.addNodeLoading(false)
  }
  // debuggerStore.setDebuggerResponse(data)
}

</script>
<template>
  <Drawer v-model:open="open" width="500px" title="调试运行" @close="onClose">
    <div>
      <!-- 调试工作流内容 -->
      <!-- 请在此添加调试工作流所需的 UI 元素 -->
      <div class="flex justify-between">
        <h2 class="flex items-center justify-between">
          <img src="~@/assets/images/icon_Start.png" class="h-4 w-4 mr-2" alt="Start icon" />
          开始节点

        </h2>
        <Button type='primary' @click="debuggerWorkFlow" class="ml-2 text-gray-600">
          运行
        </Button>
      </div>
      <div v-for="(item, index) in debuggerModel">
        <div class="debuggerStyle flex items-center text-sm mt-2 mb-2">
          <span class="name text-md">{{ item.name }}</span>
          <span class="ml-2 mr-2 description">{{ item.description }}</span>
          <span :class="item.description ? '' : 'col-span-1'" class="type rounded bg-muted pl-1 pr-1">
            {{ getType(item.type) }}
          </span>
        </div>
        <Input v-model="item.value" />
      </div>
      <!-- <div class="reponse mt-10">
        <h3 class="mb-2">运行结果</h3>
        <Textarea v-model="debuggerResponse" name="" id="" rows="10"></Textarea>
      </div> -->
    </div>
    <Notification ref="notification" @close="onClose" />
  </Drawer>
</template>
<style lang="scss" scoped>
.debuggerStyle {

  .description,
  .type {
    color: #999;
  }
}
</style>